<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城练习</title>
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入页面样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
    <!-- 顶部导航条 -->
    <div class="top-bar-swapper">
        <div class="top-bar width clearfix">
            <ul class="service">
                <li><a href="javascript:;">小米商城</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">MIUI</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">loT</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">云服务</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">天星科技</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">有品</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">小爱开放平台</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">企业团购</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">物资证照</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">协议规则</a></li>
                <li class="line">|</li>
                <li class="app-wrapper">
                    <a class="app" href="javascript:;">
                        下载app
                        <!-- 添加一个弹出层 -->
                        <div class="qrcode">
                            <img src="./img/download.png" alt="下载app">
                            <span>小米商城app</span>
                        </div>
                    </a>
                </li>
                <li class="line">|</li>
                <li><a href="javascript:;">智能生活</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">Select Location</a></li>
            </ul>
            <ul class="shop-car">
                <li>
                    <a href="javacript:;">
                        <span class="iconfont">&#xe7e6;</span>
                        购物车（0）
                        <!-- 添加一个弹出层 -->
                    </a>
                    <div class="shop-list">
                        <span>暂无选择商品</span>
                    </div>
                </li>
            </ul>
            <ul class="login">
                <li><a href="javascript:;">登录</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">注册</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">消息通知</a></li>
            </ul>
        </div>
    </div>

    <!-- 头部的外部容器 -->
    <div class="header-wrapper">
        <!-- 头部 -->
        <div class="center-bar width clearfix">
            <div class="icon-xiaomi">
                <a href="javasript:;">
                    <h1 title="小米官网">
                        <img src="./img/logo-xiaomi.png" alt="">
                    </h1>
                </a>
            </div>
            <div class="search">
                <form action="javascript:;">
                    <input class="search-text" type="text">
                    <button class="iconfont" href="javascript:;">&#xe604;</button>
                </form>
            </div>
            <ul class="center-list">
                <li><a class="all-goods" href="javascript:;">全部商品分类</a></li>
                <li class="show-goods"><a href="javascript:;">小米手机</a></li>
                <li class="show-goods"><a href="javascript:;">Radmi红米</a></li>
                <li class="show-goods"><a href="javascript:;">电视</a></li>
                <li class="show-goods"><a href="javascript:;">笔记本</a></li>
                <li class="show-goods"><a href="javascript:;">家电</a></li>
                <li class="show-goods"><a href="javascript:;">路由器</a></li>
                <li class="show-goods"><a href="javascript:;">智能硬件</a></li>
                <li><a href="javascript:;">服务</a></li>
                <li><a href="javascript:;">社区</a></li>
                <!-- 设置下拉层 -->
                <div class="goods-info">
                </div>
            </ul>
        </div>
    </div>

    <!-- 轮播图的容器 -->
    <div class="banner-wrapper">
        <div class="banner width clearfix">
            <!-- 左侧菜单 -->
            <div class="banner-left-wrapper">
                <ul class="banner-left">
                    <li>
                        <a href="javascript:;">
                            手机&nbsp;电话卡
                            <em class="iconfont">&#xe601;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            电视&nbsp;盒子
                            <em class="iconfont">&#xe601;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">笔记本&nbsp;显示器
                            <em class="iconfont">&#xe601;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">家电&nbsp;插线板
                            <em class="iconfont">&#xe601;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            出行&nbsp;穿戴
                            <em class="iconfont">&#xe601;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            智能&nbsp;路由器
                            <em class="iconfont">&#xe601;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            电源&nbsp;配件
                            <em class="iconfont">&#xe601;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            健康&nbsp;儿童
                            <em class="iconfont">&#xe601;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            耳机&nbsp;音响
                            <em class="iconfont">&#xe601;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            生活&nbsp;箱包
                            <em class="iconfont">&#xe601;</em>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 轮播图 -->
            <div class="banner-carousel">
                <!-- 左右点击按钮 -->
                <div class="arrow_l arrow">
                    <span class="iconfont">&#xe763;</span>
                </div>
                <div class="arrow_r arrow">
                    <span class="iconfont">&#xe761;</span>
                </div>
                <!-- 图片列表 -->
                <ul class="img-list">
                    <li>
                        <a href="javascript:;">
                            <img src="./img/lb1.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/lb2.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/lb3.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/lb4.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/lb5.jpeg" alt="">
                        </a>
                    </li>
                </ul>
                <!-- 小圆圈 -->
                <ol class="pointer">
                    <!-- <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li> -->
                </ol>


            </div>
        </div>
    </div>
    <!-- 广告容器 -->
    <div class="ad-wrapper">
        <div class="ad width clearfix">
            <!-- 左侧广告 -->
            <table class="shortcut">
                <tr>
                    <td>
                        <a href="JavaScript:;">
                            <span class="iconfont">&#xe608;</span>
                            <br>
                            小米秒杀
                        </a>
                    </td>
                    <td>
                        <a href="JavaScript:;">
                            <span class="iconfont">&#xe62e;</span>
                            <br>
                            企业团购
                        </a>
                    </td>
                    <td>
                        <a href="JavaScript:;">
                            <span class="iconfont">&#xe600;</span>
                            <br>
                            F码通道
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="JavaScript:;">
                            <span class="iconfont">&#xe60a;</span>
                            <br>
                            米粉卡
                        </a>
                    </td>
                    <td>
                        <a href="JavaScript:;">
                            <span class="iconfont">&#xe641;</span>
                            <br>
                            以旧换新
                        </a>
                    </td>
                    <td>
                        <a href="JavaScript:;">
                            <span class="iconfont">&#xe631;</span>
                            <br>
                            话费充值
                        </a>
                    </td>
                </tr>
            </table>

            <ul class="imges">
                <li>
                    <a href="javascript:;">
                        <img src="./img/1.jpg" alt="">
                    </a>
                <li>
                    <a href="javascript:;">
                        <img src="./img/2.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./img/3.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>


    <!-- 手机 -->
    <div class="container-wrapper">
        <div class="container width clearfix">
            <div class="phone">
                <h2>手机</h2>
                <a href="javascript:;">查看更多</a>
            </div>
            <div class="phone-list">
                <div class="phone-list-left">
                    <a href="javascript:;">
                        <img src="./img/phoneBig.webp" alt="">
                    </a>
                </div>
                <div class="phone-list-right">
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <img src="./img/phone1.webp" alt="">
                                <h3>Note 10 Pro</h3>
                                <p>天玑1100年度旗舰芯</p>
                                <p><span>1599元起</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="./img/phone1.webp" alt="">
                                <h3>Note 10 Pro</h3>
                                <p>天玑1100年度旗舰芯</p>
                                <p><span>1599元起</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="./img/phone1.webp" alt="">
                                <h3>Note 10 Pro</h3>
                                <p>天玑1100年度旗舰芯</p>
                                <p><span>1599元起</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="./img/phone1.webp" alt="">
                                <h3>Note 10 Pro</h3>
                                <p>天玑1100年度旗舰芯</p>
                                <p><span>1599元起</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="./img/phone1.webp" alt="">
                                <h3>Note 10 Pro</h3>
                                <p>天玑1100年度旗舰芯</p>
                                <p><span>1599元起</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="./img/phone1.webp" alt="">
                                <h3>Note 10 Pro</h3>
                                <p>天玑1100年度旗舰芯</p>
                                <p><span>1599元起</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="./img/phone1.webp" alt="">
                                <h3>Note 10 Pro</h3>
                                <p>天玑1100年度旗舰芯</p>
                                <p><span>1599元起</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="./img/phone1.webp" alt="">
                                <h3>Note 10 Pro</h3>
                                <p>天玑1100年度旗舰芯</p>
                                <p><span>1599元起</span></p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/animate.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>